// 侧边栏功能实现

DOM.on(window, 'load', () => {
  // 侧边栏菜单配置
  const sidebarMenu = [
    {
      id: 'dashboard',
      name: '仪表盘',
      icon: '📊',
      active: true
    },
    {
      id: 'products',
      name: '商品目录管理',
      icon: '🛍️',
      active: false
    },
    {
            id: 'inventory',
            name: '库存管理',
            icon: '📊',
            viewId: 'inventory-view',
            active: false
        },
    {
      id: 'orders',
      name: '订单处理流程',
      icon: '📋',
      active: false
    },
    {
      id: 'customers',
      name: '客户管理',
      icon: '👥',
      active: false
    },
    {
      id: 'promotions',
      name: '促销活动配置',
      icon: '🎁',
      active: false
    },
    {
      id: 'analytics',
      name: '业务数据分析',
      icon: '📈',
      active: false
    }
  ];

  // 渲染侧边栏
  function renderSidebar() {
    const sidebar = DOM.$('#sidebar');
    
    // 创建侧边栏头部
    const sidebarHeader = DOM.create('div', 'sidebar-header');
    const logo = DOM.create('div', 'sidebar-logo');
    logo.innerHTML = '🛒';
    const title = DOM.create('h2', 'sidebar-title');
    title.textContent = '电商管理';
    const toggleBtn = DOM.create('button', 'sidebar-toggle');
    toggleBtn.innerHTML = '☰';
    toggleBtn.id = 'sidebar-toggle';
    
    sidebarHeader.appendChild(logo);
    sidebarHeader.appendChild(title);
    sidebarHeader.appendChild(toggleBtn);
    
    // 创建侧边栏菜单
    const sidebarMenuEl = DOM.create('nav', 'sidebar-menu');
    
    sidebarMenu.forEach(item => {
      const menuItem = DOM.create('a', `sidebar-menu-item ${item.active ? 'active' : ''}`);
      menuItem.href = `#${item.id}`;
      menuItem.dataset.view = item.id;
      
      const icon = DOM.create('span', 'sidebar-menu-icon');
      icon.innerHTML = item.icon;
      
      const text = DOM.create('span', 'sidebar-menu-text');
      text.textContent = item.name;
      
      menuItem.appendChild(icon);
      menuItem.appendChild(text);
      
      // 点击事件处理
      DOM.on(menuItem, 'click', (e) => {
        e.preventDefault();
        // 切换活动状态
        DOM.$$('.sidebar-menu-item').forEach(el => {
          el.classList.remove('active');
        });
        menuItem.classList.add('active');
        
        // 切换视图
        viewManager.switchTo(item.id);
      });
      
      sidebarMenuEl.appendChild(menuItem);
    });
    
    // 创建侧边栏底部
    const sidebarFooter = DOM.create('div', 'sidebar-footer');
    const userInfo = DOM.create('div', 'sidebar-user');
    const userAvatar = DOM.create('div', 'sidebar-avatar');
    userAvatar.innerHTML = '管';
    const userDetails = DOM.create('div', 'sidebar-user-details');
    const userName = DOM.create('div', 'sidebar-user-name');
    userName.textContent = '管理员';
    const userRole = DOM.create('div', 'sidebar-user-role');
    userRole.textContent = '系统管理员';
    
    userDetails.appendChild(userName);
    userDetails.appendChild(userRole);
    userInfo.appendChild(userAvatar);
    userInfo.appendChild(userDetails);
    
    const logoutBtn = DOM.create('button', 'sidebar-logout');
    logoutBtn.innerHTML = '🚪 退出登录';
    
    DOM.on(logoutBtn, 'click', () => {
      if (confirm('确定要退出登录吗？')) {
        alert('退出登录成功！');
      }
    });
    
    sidebarFooter.appendChild(userInfo);
    sidebarFooter.appendChild(logoutBtn);
    
    // 组装侧边栏
    sidebar.appendChild(sidebarHeader);
    sidebar.appendChild(sidebarMenuEl);
    sidebar.appendChild(sidebarFooter);
    
    // 添加侧边栏样式
    addSidebarStyles();
  }

  // 添加侧边栏样式
  function addSidebarStyles() {
    const style = document.createElement('style');
    style.textContent = `
      .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: 240px;
        height: 100vh;
        background: #2c3e50;
        color: white;
        transition: all 0.3s ease;
        z-index: 100;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
      }
      .sidebar.collapsed {
        width: 60px;
      }
      .sidebar-header {
        display: flex;
        align-items: center;
        padding: 20px;
        border-bottom: 1px solid #34495e;
      }
      .sidebar-logo {
        font-size: 24px;
        margin-right: 12px;
      }
      .sidebar-title {
        font-size: 18px;
        font-weight: 600;
        flex: 1;
        transition: opacity 0.3s ease;
      }
      .sidebar.collapsed .sidebar-title {
        opacity: 0;
        width: 0;
        margin: 0;
      }
      .sidebar-toggle {
        background: none;
        border: none;
        color: white;
        font-size: 20px;
        cursor: pointer;
        padding: 5px;
        border-radius: 5px;
        transition: background 0.3s ease;
      }
      .sidebar-toggle:hover {
        background: rgba(255, 255, 255, 0.1);
      }
      .sidebar.collapsed .sidebar-toggle {
        margin-left: auto;
      }
      .sidebar-menu {
        flex: 1;
        padding: 20px 0;
      }
      .sidebar-menu-item {
        display: flex;
        align-items: center;
        padding: 12px 20px;
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        transition: all 0.3s ease;
        border-left: 3px solid transparent;
      }
      .sidebar-menu-item:hover {
        background: rgba(255, 255, 255, 0.1);
        color: white;
      }
      .sidebar-menu-item.active {
        background: #3498db;
        color: white;
        border-left-color: #ecf0f1;
      }
      .sidebar-menu-icon {
        font-size: 18px;
        margin-right: 12px;
        width: 24px;
        text-align: center;
      }
      .sidebar-menu-text {
        font-size: 14px;
        font-weight: 500;
        transition: opacity 0.3s ease;
      }
      .sidebar.collapsed .sidebar-menu-text {
        opacity: 0;
        width: 0;
      }
      .sidebar.collapsed .sidebar-menu-item {
        justify-content: center;
        padding: 12px 0;
      }
      .sidebar.collapsed .sidebar-menu-icon {
        margin-right: 0;
      }
      .sidebar-footer {
        padding: 20px;
        border-top: 1px solid #34495e;
      }
      .sidebar-user {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        transition: all 0.3s ease;
      }
      .sidebar-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, #3498db, #2ecc71);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 16px;
        margin-right: 12px;
      }
      .sidebar-user-details {
        flex: 1;
        transition: opacity 0.3s ease;
      }
      .sidebar.collapsed .sidebar-user-details {
        opacity: 0;
        width: 0;
        margin: 0;
      }
      .sidebar.collapsed .sidebar-avatar {
        margin-right: 0;
      }
      .sidebar-user-name {
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 2px;
      }
      .sidebar-user-role {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.6);
      }
      .sidebar-logout {
        width: 100%;
        padding: 10px;
        background: rgba(231, 76, 60, 0.2);
        color: #e74c3c;
        border: 1px solid rgba(231, 76, 60, 0.3);
        border-radius: 6px;
        cursor: pointer;
        font-size: 13px;
        transition: all 0.3s ease;
      }
      .sidebar-logout:hover {
        background: rgba(231, 76, 60, 0.3);
      }
      .sidebar.collapsed .sidebar-footer {
        padding: 10px 0;
      }
      .sidebar.collapsed .sidebar-logout {
        padding: 8px;
        font-size: 0;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .sidebar.collapsed .sidebar-logout::before {
        content: '🚪';
        font-size: 16px;
      }
      @media (max-width: 768px) {
        .sidebar {
          transform: translateX(-100%);
        }
        .sidebar.mobile-open {
          transform: translateX(0);
        }
      }
    `;
    document.head.appendChild(style);
  }

  // 切换侧边栏折叠状态
  function toggleSidebar() {
    const sidebar = DOM.$('#sidebar');
    const content = DOM.$('#content');
    
    sidebar.classList.toggle('collapsed');
    content.classList.toggle('sidebar-closed');
    
    // 保存状态到localStorage
    const collapsed = sidebar.classList.contains('collapsed');
    localStorage.setItem('sidebarCollapsed', collapsed);
  }

  // 初始化侧边栏
  function initSidebar() {
    renderSidebar();
    
    // 绑定侧边栏切换按钮事件
    DOM.on('#sidebar-toggle', 'click', toggleSidebar);
    
    // 从localStorage恢复侧边栏状态
    const collapsed = localStorage.getItem('sidebarCollapsed') === 'true';
    if (collapsed) {
      toggleSidebar();
    }
  }

  // 初始化
  initSidebar();
});